import React, {Component, PropTypes} from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router'
import './loading.less'

@connect(
	state => {
		return {
			loading:state.app.loading
		}
	}
)
@withRouter
export default class App extends Component {

	static propTypes = {

	}

	render() {
		console.log(this.props.loading)
		return (
			<div>
						{
							this.props.loading&&(
								<div className='overlay'>
									<div className="spinner" style={{'position': 'absolute', 'width': '0px', 'zIndex': '2000000000', 'left': '50%', 'top': '50%',}} role="progressbar">
									<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-0-9 1s linear infinite'}}>
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(0deg) translate(5.75px, 0px)', 'borderRadius': '1px' }}>
										</div>
									</div>
									<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-1-9 1s linear infinite'}} >
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(40deg) translate(5.75px, 0px)', 'borderRadius': '1px'}} >
										</div>
									</div>
									<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-2-9 1s linear infinite'}} >
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(80deg) translate(5.75px, 0px)', 'borderRadius': '1px'}} >
										</div>
									</div>
 		  						<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-3-9 1s linear infinite'}} >
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(120deg) translate(5.75px, 0px)', 'borderRadius': '1px'}} >
										</div>
									</div>
									<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-4-9 1s linear infinite'}} >
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(160deg) translate(5.75px, 0px)', 'borderRadius': '1px'}}>
										</div>
									</div>
									<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-5-9 1s linear infinite'}} >
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(200deg) translate(5.75px, 0px)', 'borderRadius': '1px'}}>
										</div>
									</div>
									<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-6-9 1s linear infinite' }}>
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(240deg) translate(5.75px, 0px)', 'borderRadius': '1px'}}>
										</div>
									</div>
									<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-7-9 1s linear infinite'}} >
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(280deg) translate(5.75px, 0px)', 'borderRadius': '1px'}}>
										</div>
									</div>
									<div style={{'position': 'absolute', 'top': '-1px', 'opacity':' 0.2', 'animation': 'opacity-60-20-8-9 1s linear infinite'}} >
										<div style={{'position': 'absolute', 'width': '9.5px', 'height': '3.75px', 'background': 'rgb(255, 255, 255)', 'boxShadow': 'rgba(0, 0, 0, 0.0980392) 0px 0px 1px', 'transformOrigin': 'left center 0px', 'transform': 'rotate(320deg) translate(5.75px, 0px)', 'borderRadius': '1px'}}>
										</div>
									</div>
								</div>
								</div>
							)
						}
				{this.props.children}
			</div>
		)
	}
}
